<template>
  <div class="honor">
    <div class="common_showBox bx">

      <div class="common_titleBox br bx">
        <div class="common_title bx">
          <div class="common_title_left">荣誉信息</div>
          <div class="common_title_right">
            <div class="common_title_btn" @click="openLayer()">新增</div>
            <div class="common_title_btn" @click="deletBtn()">删除</div>
          </div>
        </div>
        <div class="common_form bx">
          <el-table ref="multipleTable" :data="honorDataList" tooltip-effect="dark" style="width: 100%;height: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" prop="checkFlag"></el-table-column>
            <el-table-column label="序号" prop="num" width="60">
            </el-table-column>
            <el-table-column prop="honor_name" label="荣誉称号" width="330" show-overflow-tooltip></el-table-column>
            <el-table-column prop="organization" label="颁奖机构" show-overflow-tooltip></el-table-column>
            <el-table-column prop="award_name" label="获奖者" show-overflow-tooltip></el-table-column>
            <!-- <el-table-column prop="teacher_name" label="状态" show-overflow-tooltip ></el-table-column> -->
            <el-table-column prop="type" label="类型" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <span class="clickBtn" @click="handleEdit(scope.$index, scope.row)">修改</span>
                <span class="clickBtn" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="common_form_btnBox">
            <div @click="minPageFlag &&minPage()" class="common_form_btn_min" :class="{disableClick:!minPageFlag}">首页</div>
            <img :src="minPageFlag?'static/images/last.png':'static/images/lastNo.png'" alt="上一页" @click="minPageFlag &&lastPage()" class="pages_form_btn_last">
            <div class="common_form_btn_num">{{page}}</div>
            <img :src="maxPageFlag?'static/images/next.png':'static/images/nextNo.png'" alt="下一页" @click="maxPageFlag &&nextPage()" class="common_form_btn_next">
            <div @click="maxPageFlag &&maxPage()" class="pages_form_btn_max" :class="{disableClick:!maxPageFlag}">尾页</div>
            <div class="common_form_btn_total">总共{{totalPage}}页</div>
          </div>
        </div>
      </div>
    </div>
    <div class="common_alertBox addHonor" v-if="addHonorFlag">
      <div class="common_alertBox_header" v-if='!modifyFlag'>
        <span>新增荣誉</span>
      </div>
      <div class="common_alertBox_header" v-if='modifyFlag'>
        <span>修改荣誉</span>
      </div>
      <div class="common_alertBox_content">
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span class="importentIcon">荣誉称号：</span>
            <div class="chooseBox paddingInput">

              <input type="text" v-model="honorData.honor_name">
            </div>
          </div>
          <div class="common_alertBox_li_right">
            <span class="importentIcon">颁奖机构：</span>
            <div class="chooseBox paddingInput">

              <input type="text" v-model="honorData.organization">
            </div>
          </div>
        </div>
        <div class="common_alertBox_li">
          <div class="common_alertBox_li_left ">
            <span class="importentIcon">类型：</span>
            <div class="chooseBox down hideInput">
              <div class="maskIpnut">{{honorData.type}}</div>
              <selectMk :liDataGet="honorType" @change="change" dataType='honorType'></selectMk>
            </div>
          </div>
          <div class="common_alertBox_li_right">
            <span class="importentIcon">颁奖日期：</span>
            <div class="chooseBox  paddingInput date">

              <el-date-picker type="date" v-model="honorData.award_date" placeholder="选择日期" value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="common_alertBox_li" v-if="honorData.typeNum==1">
          <div class="common_alertBox_li_center ">
            <span class="importentIcon">获奖者：</span>
            <div class="chooseBox w180 down hideInput">
              <div class="maskIpnut">{{honorData.class_name}}</div>
              <selectMk :liDataGet="classData" @change="change" dataType='class_name'></selectMk>
            </div>
            <span>班</span>
            <div class="chooseBox w120 down hideInput">
              <div class="maskIpnut studentJq">{{honorData.student_name}}</div>
              <selectMk :liDataGet="studentData" @change="change" dataType='student_name' v-if="studentData.length>0&&studentFlagNum"></selectMk>

            </div>
          </div>
        </div>
        <div class="common_alertBox_li" v-if="honorData.typeNum==2">
          <div class="common_alertBox_li_center  ">

            <span class="importentIcon">获奖者：</span>


            <div class="chooseBox w180 down hideInput">
              <div class="maskIpnut">{{honorData.class_name}}</div>
              <selectMk :liDataGet="classData" @change="change" dataType='class_name'></selectMk>
            </div>
            <span></span>


          </div>
        </div>
      </div>
      <div class="common_alertBox_footer">
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="addHonorSureBtn()" v-if='!modifyFlag'>保存</div> -->
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="modifySureBtn" v-if='modifyFlag'>修改</div> -->
        <!-- <div class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn()">取消</div> -->
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="addHonorSureFlag" @click="addHonorSureBtn"
          v-if='!modifyFlag'>保存</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="modifySureFlag" @click="modifySureBtn" v-if='modifyFlag'>修改</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</el-button>
      </div>
    </div>

  </div>

  </div>
</template>

<script>
  import {
    http
  } from "../../../api/config"; //引入请求

  export default {
    name: 'home',
    data() {
      return {
        gender: [{
          value: '男'
        }, {
          value: '女'
        }, {
          value: '保密'
        }],
        honorType: [{
          value: '个人'

        }, {
          value: '团体'
        }],
        studentFlagNum: false,
        studentData: [{
          value: '请选择',
          id: ''
        }],
        classData: [],
        addHonorSureFlag: false,
        modifySureFlag: false,
        addHonorFlag: false, //添加班级开关
        setTeacherFlag: false, //设置老师开关
        modifyFlag: false,
        page: 1, //初始页数
        pagesize: 12, //页数条数
        minPageFlag: false, //最小页面开关
        maxPageFlag: true, //最大页面开关
        totalPage: 0, //总共页数
        honorDataList: [{"id":12,"honor_name":"阿斯顿顶顶顶顶顶顶顶顶顶顶顶顶顶","organization":"打","type":"个人","student_id":29,"award_date":"2018-08-13","class_id":1,"admin":1,"award_name":"小学 2018届 1班 啊嘎嘎哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇","typeNum":"1","num":1},{"id":11,"honor_name":"测试","organization":"啊","type":"个人","student_id":27,"award_date":"2018-08-07","class_id":1,"admin":1,"award_name":"小学 2018届 1班 长长长长黄出哈哈哈哈哈哈哈哈哈哈哈","typeNum":"1","num":2},{"id":10,"honor_name":"123","organization":"123","type":"团体","student_id":0,"award_date":"2018-08-22","class_id":12,"admin":1,"award_name":"初中 2018届 4班","typeNum":"2","num":3},{"id":9,"honor_name":"拾金不昧","organization":"省博物馆","type":"个人","student_id":21,"award_date":"2018-08-22","class_id":1,"admin":1,"award_name":"小学 2018届 1班 村上春树","typeNum":"1","num":4},{"id":8,"honor_name":"学习先锋","organization":"教务处","type":"个人","student_id":20,"award_date":"2018-08-22","class_id":1,"admin":1,"award_name":"小学 2018届 1班 张小娴","typeNum":"1","num":5},{"id":7,"honor_name":"见义勇为","organization":"公安厅","type":"团体","student_id":0,"award_date":"2018-08-20","class_id":10,"admin":1,"award_name":"小学 2018届 5班","typeNum":"2","num":6},{"id":6,"honor_name":"荣誉","organization":"学校","type":"个人","student_id":16,"award_date":"2018-08-15","class_id":7,"admin":1,"award_name":"高中 2018届 4班 王刚","typeNum":"1","num":7},{"id":5,"honor_name":"优秀班集体","organization":"教务处","type":"团体","student_id":0,"award_date":"2018-08-20","class_id":7,"admin":24,"award_name":"高中 2018届 4班","typeNum":"2","num":8},{"id":4,"honor_name":"11","organization":"11","type":"个人","student_id":13,"award_date":"2018-08-07","class_id":6,"admin":1,"award_name":"小学 2018届 3班 王九羊","typeNum":"1","num":9},{"id":3,"honor_name":"2121","organization":"2121","type":"个人","student_id":13,"award_date":"2018-08-13","class_id":6,"admin":1,"award_name":"小学 2018届 3班 王九羊","typeNum":"1","num":10},{"id":2,"honor_name":"先进班集体","organization":"高新一中","type":"团体","student_id":0,"award_date":"2018-08-06","class_id":6,"admin":1,"award_name":"小学 2018届 3班","typeNum":"2","num":11},{"id":1,"honor_name":"先进个人","organization":"高新一中","type":"个人","student_id":3,"award_date":"2018-08-12","class_id":1,"admin":1,"award_name":"小学 2018届 1班 李欢庭","typeNum":"1","num":12}],
        honorData: {
          award_date: '',
          honor_name: '',
          organization: '',
          class_name: '请选择',
          student_name: '请选择',
          type: '个人',
          typeNum: 1,
          award_name: '',
          student_id: '',
          class_id: '',
          admin: ''
        }, //接收数据
        multipleSelection: [], //多选按钮
        handleEdit(index, row) { //修改事件

          this.addHonorFlag = true;
          this.modifyFlag = true;
          this.honorData = JSON.parse(JSON.stringify(row));

          let class_id = this.honorData.class_id;
          let student_id = this.honorData.student_id;
          this.studentData = [{
            value: '请选择',
            id: ''
          }]
          let classData = this.classData;

          let _this = this;

          _this.studentFlagNum = false;
          if (student_id) {
            classData.map((e) => {
              if (e.id == class_id) {
                this.honorData.class_name = e.value;
                this.getHonorPerson(e.id);
                return
              }
            })

            let studentData = this.studentAllData;

            studentData.map((e) => {
              if (e.id == student_id) {
                this.honorData.student_name = e.value;



                return
              }
            })

          } else {
            classData.map((e) => {
              if (e.id == class_id) {
                this.honorData.class_name = e.value;
                return
              }
            })
          }
          switch (this.honorData.typeNum) {
            case '1':
              this.honorData.type = '个人';
              break;
            case '2':
              this.honorData.type = '团队';
              break;
          }


          $('.mask').show();

        },
        handleDelete(index, row) { //删除事件
          //console.log(row.id)
          // this.addTeacherFlag = false;
          // this.modifyFlag = false;
          // $('.mask').hide();
          var _this = this;
          this.$confirm('此操作将永久删除' + row.honor_name + ', 是否继续?', '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',

            type: 'warning'
          }).then(() => {




          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }
      }
    },
    methods: {
      change: function (e) { //下拉框插件改变
        // //console.log(e)
        //console.log(e)
        this.studentFlagNum = false; //点击切换
        switch (e.dataType) {

          case 'honorType':
            this.honorData.type = e.val;
            this.honorData.typeNum = e.index;
            if (this.honorData.typeNum == 1) {
              // this.getHonorPerson(this.honorData.class_id);

            }
            // this.honorData.typeNum = e.index;
            break;
          case 'class_name':
            this.honorData.class_name = e.val;
            this.honorData.class_id = e.id;
            if (this.honorData.typeNum == 1) {
              this.getHonorPerson(this.honorData.class_id);

            }
            break;
          case 'student_name':
            this.honorData.student_name = e.val;
            this.honorData.student_id = e.id;
            this.studentFlagNum = true; //点击切换
            break;
        }
      },
      openLayer() { //显示添加弹窗
        this.addHonorFlag = true;
        $('.mask').show();
      },
      setTeacher() { //设置教师
        this.setTeacherFlag = true;
        $('.mask').show();
      },
      deletBtn() { //删除按钮
        //console.log(this.multipleSelection)
        var _this = this;
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择荣誉'
          });
          return;
        }
        var nameStr = '';
        var idStr = '';
        this.multipleSelection.map(function (e) {
          //console.log(e)
          nameStr += e.honor_name + '、';
          idStr += e.id + ','
        });
        nameStr = nameStr.substring(0, nameStr.length - 1);
        idStr = idStr.substring(0, idStr.length - 1);
        //console.log(idStr)
        this.$confirm('此操作将永久删除' + nameStr + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      toggleSelection(rows) { //全选
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val; //选中数据
      },
      getData(page, pagesize) { //获取数据
        let _this = this;
        _this.maxPageFlag = false;
        _this.minPageFlag = false;
        var page = page;
        var pagesize = pagesize;

   

      },
      nextPage() { //下一页
        var page = this.page + 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize)
      },
      lastPage() { //上一页
        var page = this.page - 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      minPage() { //首页
        var page = 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      maxPage() { //尾页
        var page = this.totalPage;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      cancelBtn() { //取消按钮
        this.addHonorFlag = false;
        this.setTeacherFlag = false;
        this.modifySureFlag = false;
        this.addHonorSureFlag = false;
        this.studentData = [];
        this.honorData = {
          award_date: '',
          honor_name: '',
          organization: '',
          class_name: '请选择',
          student_name: '请选择',
          type: '个人',
          typeNum: 1,
          award_name: '',
          student_id: '',
          class_id: '',
          admin: ''
        }
        this.modifyFlag = false;
        $('.mask').hide();
      },
      addHonorSureBtn() { //设置教师确定按钮
        //console.log(this.honorData)

        if (this.trim(this.honorData.honor_name) === '') {
          this.$message.error('荣誉名称不能为空');
          return;
        } else if (this.trim(this.honorData.organization) === '') {
          this.$message.error('颁奖机构不能为空');
          return;
        } else if (this.honorData.award_date === '') {
          this.$message.error('日期不能为空');
          return;

        }


        var _this = this;
        _this.addHonorSureFlag = true;

          _this.$message({ //成功返回
            message: '成功',
            type: 'success',
            duration: 888
          });

      },

      addClassSureBtn() { //添加班级确定按钮
        alert('保存成功')
        this.addHonorFlag = false;
        $('.mask').hide();
      },
      modifySureBtn() {
        var id = this.honorData.id;
        var _this = this;

        let type = _this.honorData.typeNum;
        let student_id = _this.honorData.student_id;
        if (type == '1' && student_id == '') {
          this.$message.error('获奖者不能为空');

          return;
        }
        _this.modifySureFlag = true;

      },
      getHonorPerson(num) {
        //console.log(num)
        var _this = this;
 


      },
      getClassData() {
        var _this = this;
        var year = (new Date()).getFullYear();




      },

    },

    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      });


    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .select {
    width: 226px;
    box-sizing: border-box;
  }


  .chooseBox {
    margin: 0;
    width: 226px;
    position: relative;
    /* padding-right: 56px; */
    box-sizing: border-box;
  }

  .common_alertBox_li span {
    position: relative;
  }

  .chooseBox input {
    border: none;
    outline: none;
  }





  .disableClick {
    color: #bebebe;
  }

  .common_form_btn_min {
    margin-right: 13px;
  }

  .pages_form_btn_next {
    margin-right: 10px;
  }

  .pages_form_btn_max {
    margin-right: 32px;
  }

  .pages_form_btn_total {
    margin-right: 35px;
  }

  .pages_form_btn_last {
    margin-right: 26px;
  }

  .pages_form_btn_num {
    width: 37px;
    height: 37px;
    background: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 37px;
    text-align: center;
    border-radius: 50%;
    margin-right: 26px;
  }

  .class {
    position: relative;
    width: 100%;
    height: 100%;
    /* border-top: 1px solid rgba(0, 0, 0, 0); */
  }

  .classManagementList {
    width: 100%;
    height: 100%;
    margin-top: 0;
    position: relative;
  }

  .classManagement_title {
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .classManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
    color: #636363;
  }

  .classManagement_title_right {
    display: flex;
    align-items: center;
  }

  .classManagement_title_btn {
    margin-right: 30px;
    /* width: 180px; */
    padding: 0 27px;
    height: 34px;
    background: #2286cf;
    border-radius: 34px;
    line-height: 34px;
    color: #fff;
  }



  .campusManagementBox {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .campus {
    width: 100%;
    height: 100%;
    background: #fff;
    padding-top: 60px;
    position: relative;
  }

  .campusManagement_title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .campusManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
  }

  .campusManagement_title_right {
    display: flex;
    align-items: center;
  }


  .campusManagement_weekName {
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
  }

  .weekName_title {
    width: 10%;
  }

  .weekName_li {
    width: 18%;
  }

  .commonBox_courseTableBox {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .commonBox_courseTable_left {
    width: 10%;
  }

  .commonBox_courseTable_right {
    width: 90%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .commonBox_courseTable_left_li {
    height: 16.67%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .commonBox_courseTable_right_li {
    width: 19.7%;
    height: 16%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4db3f8;
    border-radius: 4px;
    font-size: 28px;
    color: #fff;
  }

  /* 更正 */

  .honor {
    height: 100%;
  }

  .common_showBox {
    padding: 0;
  }

  .common_alertBox_li_right,
  .common_alertBox_li_left {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .addHonor {
    width: 833px;
    height: 377px;
  }

  .common_alertBox_li_center {
    width: 100%;
    padding: 0 81px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }

  .common_alertBox_li_center span {
    margin: 0 10px;
  }





  /* 更正 */

</style>
